<template>
  <div class="user-card" v-if="!userObj">
    <img :src="avatarUrl" alt="用户头像" class="avatar" />
    <div class="user-info">
      <h2>{{ name }}</h2>
      <p>{{ email }}</p>
      <span>{{ greetingMessage }}</span>
    </div>
  </div>

  <!-- 动态传递的pros数据 -->
  <div class="user-card" v-else>
    <img :src="userObj.avatarUrl" alt="用户头像" class="avatar" />
    <div class="user-info">
      <h2>{{ userObj.name }}</h2>
      <p>{{ userObj.email }}</p>
      <span>{{ fullName }}</span>
    </div>
  </div>
</template>

<script setup>
  import { computed } from "vue";
  // defineProps 是一个宏，用于声明组件接收哪些 props
  const props = defineProps({
    name: String,
    email: String,
    avatarUrl: String,
    greetingMessage: {
      type: String,
      default: '默认值:greetingMessage'
    },
    userObj: {
      type: Object,
      // required: true,
      // default(rawProps) {
      //   return { message: 'hello' }
      // },
      // 自定义校验规则
      validator: (value) => {
        return value.name && value.email && value.avatarUrl
        // return ['name', 'email', 'avatarUrl'].every(key => key in value)
      }
    }
  })

  const fullName = computed(() => {
    return `年龄:${props.userObj.age} `
  })



</script>

<style scoped>
  .user-card {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 0;
  }

  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
  }

  .user-info h2 {
    margin: 0;
    font-size: 20px;
    color: #333;
  }

  .user-info p {
    margin: 5px 0 0;
    font-size: 16px;
    color: #666;
  }
</style>
